<template>
  <el-dialog :visible.sync="show" v-bind="dialogParams" @close="_dialogClosed">
    <component v-bind:is="component" v-bind="childParams" @close="_dialogClosed" v-if="showComponent" @confirm="_dialogConfirmed" ref="child" />
  </el-dialog>
</template>
<script>
export default {
  name: 'X2Dialog',
  props: {
    component: {
      type: Object,
      default() {
        return null
      },
    },
    dialogParams: {
      type: Object,
      default() {
        return null
      },
    },
    childParams: {
      type: Object,
      default() {
        return null
      },
    },
    ver: {
      type: String,
      default: '',
    },
  },

  data() {
    return {
      show: false,
      showComponent: false,
    }
  },
  created() {},
  mounted() {},
  methods: {
    _dialogClosed() {
      this.resolve({ closeType: 'cancel' })
      this.show = false
      this.showComponent = false
    },
    _dialogConfirmed(param) {
      this.resolve({ closeType: 'confirm', param })
      this.show = false
      this.showComponent = false
    },
    _showDialog() {
      if (!this.show) {
        this.show = true
        this.showComponent = false
        this.$nextTick(function () {
          console.log('load x2dialog v', this.ver)
          this.showComponent = true
        })
      }
    },
  },
}
</script>

<style>
.selfpropup .dx-popup-content {
  padding: 0px;
}

.el-dialog__wrapper .el-dialog__body {
  padding: 12px 18px;
}
</style>
